<template>
  <el-dialog :title="title" v-model="visible" :width="width" append-to-body destroy-on-close @closed="handleClosed"
    class="goods-detail-dialog">
    <el-card class="box-card">
      <template #header>
        <div class="clearfix" style="text-align: center">
          <span style="font-size: 20px; color: #1890ff">商品基本信息</span>
          <el-skeleton :rows="6" animated v-if="loading" />
          <div v-else-if="goods" class="goods-detail-container">
            <el-descriptions :column="2" border class="detail-card">
              <el-descriptions-item label="商品ID">{{
                goods.goodsId
              }}</el-descriptions-item>
              <el-descriptions-item label="商品名称">{{
                goods.goodsName
              }}</el-descriptions-item>
              <el-descriptions-item label="分类名称">{{
                goods.categoryName
              }}</el-descriptions-item>
              <el-descriptions-item label="商品价格">
                <el-tag type="danger">{{ goods.price }}￥</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="总库存">{{
                goods.totalStock
              }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <dict-tag :options="wdm_status" :value="goods.status" />
              </el-descriptions-item>
              <el-descriptions-item label="商品图片" :span="2">
                <image-preview :src="goods.imgUrl" :width="150" :height="150" />
              </el-descriptions-item>
              <el-descriptions-item label="商品描述" :span="2">
                {{ goods.description }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div v-else class="empty-state">
            <el-empty description="商品信息不存在" />
          </div>
        </div>
      </template>
    </el-card>

    <template #footer>
      <div class="dialog-footer-center">
        <el-button type="primary" @click="visible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import { getGoods } from "@/api/ruoyi/goods";

const props = defineProps({
  // 控制显示/隐藏
  modelValue: {
    type: Boolean,
    default: false,
  },
  // 商品ID
  goodsId: {
    type: Number,
    default: null,
  },
  // 对话框标题
  title: {
    type: String,
    default: "商品详情",
  },
  // 对话框宽度
  width: {
    type: String,
    default: "60%",
  },
  // 状态字典
  wdm_status: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["update:modelValue"]);

const visible = ref(false);
const loading = ref(false);
const goods = ref(null);

// 监听props的变化
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
    if (val && props.goodsId) {
      loadGoodsDetail(props.goodsId);
    }
  }
);

watch(visible, (val) => {
  emit("update:modelValue", val);
});

// 加载商品详情
function loadGoodsDetail(goodsId) {
  loading.value = true;
  goods.value = null;

  getGoods(goodsId)
    .then((response) => {
      goods.value = response.data;
    })
    .catch((error) => {
      console.error("获取商品详情失败:", error);
    })
    .finally(() => {
      loading.value = false;
    });
}

// 关闭时的处理
function handleClosed() {
  goods.value = null;
}
</script>

<style scoped>
/* 修复嵌套写法：改为平铺结构 */
.goods-detail-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.goods-detail-container {
  padding: 10px;
}

.detail-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 修复嵌套写法：改为平铺结构 */
.detail-card :deep(.el-descriptions-item__label) {
  font-weight: bold;
  background-color: #f5f7fa;
}

.empty-state {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.dialog-footer-center {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
</style>